<!DOCTYPE HTML>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>z-index属性演示</title>
    <style type="text/css">
        body {
            width: 960px;
            margin: 0 auto;
            font-family: 微软雅黑;
            font-size: 18px;
            line-height: 1.8em;
        }

        .center-table {
            display: table;
            height: 250px;
            background: white;
            width: 240px;
            margin: 20px;
            /* line-height: 100px; */
        }

        .center-table p {
            display: table-cell;
            margin: 0;
            background: black;
            color: white;
            padding: 20px;
            border: 10px solid white;
            vertical-align: middle;
            line-height: 1.2;
        }

        h1 {
            color: green;
        }

        div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .index1 {
            position: absolute;
            left: 150px;
            top: 150px;
            background-color: #aaa;
        }

        .index2 {
            background-color: #ccc;
            position: absolute;
            left: 190px;
            top: 190px;
        }

        .index3 {
            position: absolute;
            left: 230px;
            top: 230px;
            z-index: 3;
            background-color: #eee;
        }

        .index4 {
            z-index: 4;
            background-color: #999;
        }

    </style>
</head>

<body>
    <h1>z-index属性只对使用了position属性的元素有效</h1>
    <div class="index4">z-index: 4</div>
    <div class="index1">z-index: 1</div>
    <div class="index2">z-index: 2</div>
    <div class="index3">z-index: 3</div>
    <div class="center-table">
        <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
    </div>
    <style>

    </style>
</body>

</html>
